<template>
  <div ref="editor"></div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import WangEditor from 'wangeditor'

export default {
  name: 'app',
  props: {
    editText: {
      type: String,
      default: '',
    },
  },
  
  setup(props, context) {
    const editor = ref()
    let instance
    onMounted(() => {
      instance = new WangEditor(editor.value)
      Object.assign(instance.config, {
        onchange() {
          context.emit('deliverEdit', instance.txt.html())
        },
      })
      instance.create()
      setTimeout(() => {
        setEditValue()
      }, 1000)
    })
    onBeforeUnmount(() => {
      instance.destroy()
      instance = null
    })
    const setEditValue = () => {
      const { editText } = props
      if (editText) instance.txt.html(editText)
    }
    const syncHTML = () => {
      content.html = instance.txt.html()
    }

    return {
      syncHTML,
      editor,
    }
  },
}
</script>
